<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>LayIM社交模式 在线演示 - Layui</title>
    <link rel="stylesheet" href="/Public/Swoole/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Public/Swoole/css/global.css" media="all">
    <script src="/Public/Swoole/layui/layui.js"></script>
    <script src="/Public/Swoole/js/json2.js"></script>
    <script src="/Public/Swoole/js/web_socket.js"></script>
    <script src="/Public/Swoole/js/jquery.min.js" "></script>
    <script src="/Public/Swoole/js/laychat.js ""></script>
    <eq name="login_type" value="2">
        <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101363016" data-redirecturi="http://layim.pdosgk.com/qq_login.php" charset="utf-8">
        </script>
    </eq>
</head>
<style type="text/css">
.nav {
    position: absolute;
    top: 12px;
    right: 0;
}
</style>

<body>
    <div class="header">
        <div class="main">
            <ul class="layui-nav">
                <li class="layui-nav-item"><a href="/">首页</a></li>
                <li class="layui-nav-item"><a href="{:U('Swoole/logout')}">退出</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-main" style="margin-top: 60px;">
        <div class="demo-footer" style="margin-top: 100px; line-height: 30px;">
            <p>你现在阅览的是：LayIM社交模式，一般会用到里面的全部功能</p>
            <p>如有Bug，或者意见，可前往我的简易博客留言 <a class="layui-btn layui-btn-normal layui-btn-xs" href="http://blog.pdosgk.com/2018/04/18/thinkphp_layim/" target="_blank"><i class="layui-icon"></i>http://blog.pdosgk.com/2018/04/18/thinkphp_layim/</a></p>
            <eq name="login_type" value="2">
                <p class="qq_login">
                    请使用社交帐号登录测试
                    <br>
                    <span id="qqLoginBtn"></span>
                </p>
            </eq>
            <p>
                此作品由Layui的贤心出品， 在此做下swoole当服务器的范例, 已实现的功能有
            </p>
            <ul>
                <li>1.聊天功能</li>
                <li>2.聊天记录</li>
                <li>3.好友查找，添加</li>
                <li>4.消息</li>
                <li>5.好友分组功能</li>
                <li>6.群聊功能</li>
                <li>7.<a href="{:U('mobile_login')}">移动端</a></li>
            </ul>
            <p class="demo-content" style="margin-top: 30px;">
                <a href="http://www.layui.com/doc/layim.html">文档</a>
                <a href="http://layim.layui.com/">关于Layim</a></p>
            <p>假如没人陪你聊天， 自己双开， 自己聊吧
                <hr> 机器人的功能有: 吉凶查询,聊天对话,问答百科,生活百科,知识库,星座运势,新闻资讯,成语接龙,故事大全,
                <br>菜谱大全,快递查询,笑话大全,天气查询,图片搜索,列车查询,航班查询,数字计算,日期查询,公交查询,中英互译,
                <br>自行测试
            </p>
            <p class="demo-content"><a href="http://swoole.com/">关于Swoole</a></p>
            <hr>
            <p class="demo-content">
                <blockquote class="site-text layui-elem-quote">
                    <p>前后端部分的源码地址: https://gitee.com/pdosgk/thinkphp_layim</p>
                </blockquote>
                <blockquote class="site-text layui-elem-quote">
                    <p>服务端swoole部分的源码地址: http://git.oschina.net/pdosgk/swoole_framework</p>
                </blockquote>
                
                <br> 用到的实例是/pdosgk/websocket_server_laychat.php 需要在linux执行该进程
                <br> # php {所在目录}/swoole_framework/pdosgk/websocket_server_laychat.php
            </p>
        </div>
    </div>
    <eq name="login_type" value="2">
        <script type="text/javascript">
        // QQ互联
        userinfo = {};
        QC.Login({
            btnId: "qqLoginBtn",
            scope: "get_user_info",
            size: "A_L"
        }, function(reqData, opts) {
            //登录成功
            QC.Login.getMe(function(openId, accessToken) {
                userinfo['id'] = openId;
                userinfo['avatar'] = reqData.figureurl_qq_2;
                userinfo['sign'] = reqData.gender;
                userinfo['username'] = reqData.nickname;
                login(userinfo);
                laychat.open();
                var dom = document.getElementById(opts['btnId']),
                    _logoutTemplate = [
                        //头像
                        '<span><img src="{figureurl}" class="logout_icon"/></span>',
                        //昵称
                        '<span>{nickname}</span>',
                        //退出
                        '<span><a href="javascript:logout();">退出</a></span>'
                    ].join("");
                dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
                    nickname: QC.String.escHTML(reqData.nickname), //做xss过滤
                    figureurl: reqData.figureurl_qq_1
                }));
            });
        }, function(opts) {
            //注销成功
            location.reload();
        });

        function login(userinfo) {
            $.post("{:U('ajax_qq_login')}", userinfo, function(data) {
                if (data.code == 0) {
                    // 登录成功
                    //get_random();
                } else {
                    alert(data.msg);
                }
            }, 'json');
        }

        function logout() {
            QC.Login.signOut();
            window.location = '{:U('Swoole/logout')}';
            return false;
        }
        </script>
        <else/>
        <script>
        layui.config({
            version: true //一般用于更新组件缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610
            ,debug: true //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面
            ,base: '' //设定扩展的Layui组件的所在目录，一般用于外部组件扩展
        });
        laychat.open();
        </script>
    </eq>
    <script>
    layui.use('element', function() {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

    });
    </script>
</body>

</html>